// 点评页
const CommentDialog = {
  template: `
  <vxe-modal v-model="visible" id="commentDialog" width="1000" height="560" min-width="460" min-height="320"
   showFooter show-zoom resize transfer @close="onClose">
    <template #title>
      <span>点评: {{rowObj.code}}</span>
    </template>
    <template #default>
      <h2 class="dialog-tit">病案号： {{rowObj.code}}</h2>
      <el-form ref="formRef" :model="formObj" label-width="100px" label-suffix="：">
        <el-row>
          <el-col :span="12">
            <el-form-item label="主要诊断" prop="mainDiagnosis">
              <div class="form-item-tit">{{rowObj.mainDiagnosis}}， 编码：{{rowObj.mainDiagnosisCode}}</div>
              <el-select v-model="formObj.mainStatus" class="w80 mr5">
                <el-option v-for="(s, idx) in statusOptions" :key="idx" :label="s.label" :value="s.value"></el-option>
              </el-select>
              <el-input class="w290" v-model="formObj.mainDiagnosis"></el-input>              
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="入院病情" prop="mainDiagnosisInInfo">
              <div class="form-item-tit">{{rowObj.mainDiagnosisInInfo}}</div>
              <el-select v-model="formObj.mainDiagnosisStatus" class="w80 mr5">
                <el-option v-for="(s, idx) in statusOptions" :key="idx" :label="s.label" :value="s.value"></el-option>
              </el-select>
              <el-input class="w290" v-model="formObj.mainDiagnosisInInfo"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="其他诊断1" prop="oDiagnosis1">
              <div class="form-item-tit">{{rowObj.oDiagnosis1}}， 编码：{{rowObj.oDiagnosis1Code}}</div>
              <el-select v-model="formObj.oStatus1" class="w80 mr5">
                <el-option v-for="(s, idx) in statusOptions" :key="idx" :label="s.label" :value="s.value"></el-option>
              </el-select>
              <el-input class="w290" v-model="formObj.oDiagnosis1"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="入院病情" prop="oDiagnosis1InInfo">
              <div class="form-item-tit">{{rowObj.oDiagnosis1InInfo}}</div>
              <el-select v-model="formObj.oDiagnosis1Status" class="w80 mr5">
                <el-option v-for="(s, idx) in statusOptions" :key="idx" :label="s.label" :value="s.value"></el-option>
              </el-select>
              <el-input class="w290" v-model="formObj.oDiagnosis1InInfo"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="其他诊断2" prop="oDiagnosis2">
              <div class="form-item-tit">{{rowObj.oDiagnosis2}}， 编码：{{rowObj.oDiagnosis2Code}}</div>
              <el-select v-model="formObj.oStatus2" class="w80 mr5">
                <el-option v-for="(s, idx) in statusOptions" :key="idx" :label="s.label" :value="s.value"></el-option>
              </el-select>
              <el-input class="w290" v-model="formObj.oDiagnosis2"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="入院病情" prop="oDiagnosis2InInfo">
              <div class="form-item-tit">{{rowObj.oDiagnosis2InInfo}}</div>
              <el-select v-model="formObj.oDiagnosis2Status" class="w80 mr5">
                <el-option v-for="(s, idx) in statusOptions" :key="idx" :label="s.label" :value="s.value"></el-option>
              </el-select>
              <el-input class="w290" v-model="formObj.oDiagnosis2InInfo"></el-input>
            </el-form-item>
          </el-col>
        </el-row>        
        <el-row>
          <el-col :span="12">
            <el-form-item label="其他诊断3" prop="oDiagnosis3">
              <div class="form-item-tit">{{rowObj.oDiagnosis3}}， 编码：{{rowObj.oDiagnosis3Code}}</div>
              <el-select v-model="formObj.oStatus3" class="w80 mr5">
                <el-option v-for="(s, idx) in statusOptions" :key="idx" :label="s.label" :value="s.value"></el-option>
              </el-select>
              <el-input class="w290" v-model="formObj.oDiagnosis3"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="入院病情" prop="oDiagnosis3InInfo">
              <div class="form-item-tit">{{rowObj.oDiagnosis3InInfo}}</div>
              <el-select v-model="formObj.oDiagnosis3Status" class="w80 mr5">
                <el-option v-for="(s, idx) in statusOptions" :key="idx" :label="s.label" :value="s.value"></el-option>
              </el-select>
              <el-input class="w290" v-model="formObj.oDiagnosis3InInfo"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="其他诊断4" prop="oDiagnosis4">
              <div class="form-item-tit">{{rowObj.oDiagnosis4}}， 编码：{{rowObj.oDiagnosis4Code}}</div>
              <el-select v-model="formObj.oStatus4" class="w80 mr5">
                <el-option v-for="(s, idx) in statusOptions" :key="idx" :label="s.label" :value="s.value"></el-option>
              </el-select>
              <el-input class="w290" v-model="formObj.oDiagnosis4"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="入院病情" prop="oDiagnosis4InInfo">
              <div class="form-item-tit">{{rowObj.oDiagnosis4InInfo}}</div>
              <el-select v-model="formObj.oDiagnosis4Status" class="w80 mr5">
                <el-option v-for="(s, idx) in statusOptions" :key="idx" :label="s.label" :value="s.value"></el-option>
              </el-select>
              <el-input class="w290" v-model="formObj.oDiagnosis4InInfo"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="其他诊断5" prop="oDiagnosis5">
              <div class="form-item-tit">{{rowObj.oDiagnosis5}}， 编码：{{rowObj.oDiagnosis5Code}}</div>
              <el-select v-model="formObj.oStatus5" class="w80 mr5">
                <el-option v-for="(s, idx) in statusOptions" :key="idx" :label="s.label" :value="s.value"></el-option>
              </el-select>
              <el-input class="w290" v-model="formObj.oDiagnosis5"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="入院病情" prop="oDiagnosis5InInfo">
              <div class="form-item-tit">{{rowObj.oDiagnosis5InInfo}}</div>
              <el-select v-model="formObj.oDiagnosis5Status" class="w80 mr5">
                <el-option v-for="(s, idx) in statusOptions" :key="idx" :label="s.label" :value="s.value"></el-option>
              </el-select>
              <el-input class="w290" v-model="formObj.oDiagnosis5InInfo"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="其他诊断6" prop="oDiagnosis6">
              <div class="form-item-tit">{{rowObj.oDiagnosis6}}， 编码：{{rowObj.oDiagnosis6Code}}</div>
              <el-select v-model="formObj.oStatus6" class="w80 mr5">
                <el-option v-for="(s, idx) in statusOptions" :key="idx" :label="s.label" :value="s.value"></el-option>
              </el-select>
              <el-input class="w290" v-model="formObj.oDiagnosis6"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="入院病情" prop="oDiagnosis6InInfo">
              <div class="form-item-tit">{{rowObj.oDiagnosis6InInfo}}</div>
              <el-select v-model="formObj.oDiagnosis6Status" class="w80 mr5">
                <el-option v-for="(s, idx) in statusOptions" :key="idx" :label="s.label" :value="s.value"></el-option>
              </el-select>
              <el-input class="w290" v-model="formObj.oDiagnosis6InInfo"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="其他诊断7" prop="oDiagnosis7">
              <div class="form-item-tit">{{rowObj.oDiagnosis7}}， 编码：{{rowObj.oDiagnosis7Code}}</div>
              <el-select v-model="formObj.oStatus7" class="w80 mr5">
                <el-option v-for="(s, idx) in statusOptions" :key="idx" :label="s.label" :value="s.value"></el-option>
              </el-select>
              <el-input class="w290" v-model="formObj.oDiagnosis7"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="入院病情" prop="oDiagnosis7InInfo">
              <div class="form-item-tit">{{rowObj.oDiagnosis7InInfo}}</div>
              <el-select v-model="formObj.oDiagnosis7Status" class="w80 mr5">
                <el-option v-for="(s, idx) in statusOptions" :key="idx" :label="s.label" :value="s.value"></el-option>
              </el-select>
              <el-input class="w290" v-model="formObj.oDiagnosis7InInfo"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="其他诊断8" prop="oDiagnosis8">
              <div class="form-item-tit">{{rowObj.oDiagnosis8}}， 编码：{{rowObj.oDiagnosis8Code}}</div>
              <el-select v-model="formObj.oStatus8" class="w80 mr5">
                <el-option v-for="(s, idx) in statusOptions" :key="idx" :label="s.label" :value="s.value"></el-option>
              </el-select>
              <el-input class="w290" v-model="formObj.oDiagnosis8"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="入院病情" prop="oDiagnosis8InInfo">
              <div class="form-item-tit">{{rowObj.oDiagnosis8InInfo}}</div>
              <el-select v-model="formObj.oDiagnosis8Status" class="w80 mr5">
                <el-option v-for="(s, idx) in statusOptions" :key="idx" :label="s.label" :value="s.value"></el-option>
              </el-select>
              <el-input class="w290" v-model="formObj.oDiagnosis8InInfo"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="其他诊断9" prop="oDiagnosis9">
              <div class="form-item-tit">{{rowObj.oDiagnosis9}}， 编码：{{rowObj.oDiagnosis9Code}}</div>
              <el-select v-model="formObj.oStatus9" class="w80 mr5">
                <el-option v-for="(s, idx) in statusOptions" :key="idx" :label="s.label" :value="s.value"></el-option>
              </el-select>
              <el-input class="w290" v-model="formObj.oDiagnosis9"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="入院病情" prop="oDiagnosis9InInfo">
              <div class="form-item-tit">{{rowObj.oDiagnosis9InInfo}}</div>
              <el-select v-model="formObj.oDiagnosis9Status" class="w80 mr5">
                <el-option v-for="(s, idx) in statusOptions" :key="idx" :label="s.label" :value="s.value"></el-option>
              </el-select>
              <el-input class="w290" v-model="formObj.oDiagnosis9InInfo"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="主手术" prop="opNo1Info">
              <div class="form-item-tit">{{rowObj.opNo1Info}}</div>
              <el-select v-model="formObj.opNo1Status" class="w80 mr5">
                <el-option v-for="(s, idx) in statusOptions" :key="idx" :label="s.label" :value="s.value"></el-option>
              </el-select>
              <el-input class="w290" v-model="formObj.opNo1Info"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="其他手术1" prop="opNo2Info">
              <div class="form-item-tit">{{rowObj.opNo2Info}}</div>
              <el-select v-model="formObj.opNo2Status" class="w80 mr5">
                <el-option v-for="(s, idx) in statusOptions" :key="idx" :label="s.label" :value="s.value"></el-option>
              </el-select>
              <el-input class="w290" v-model="formObj.opNo2Info"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="其他手术2" prop="opNo3Info">
              <div class="form-item-tit">{{rowObj.opNo3Info}}</div>
              <el-select v-model="formObj.opNo3Status" class="w80 mr5">
                <el-option v-for="(s, idx) in statusOptions" :key="idx" :label="s.label" :value="s.value"></el-option>
              </el-select>
              <el-input class="w290" v-model="formObj.opNo3Info"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="其他手术3" prop="opNo4Info">
              <div class="form-item-tit">{{rowObj.opNo4Info}}</div>
              <el-select v-model="formObj.opNo4Status" class="w80 mr5">
                <el-option v-for="(s, idx) in statusOptions" :key="idx" :label="s.label" :value="s.value"></el-option>
              </el-select>
              <el-input class="w290" v-model="formObj.opNo4Info"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="其他手术4" prop="opNo5Info">
              <div class="form-item-tit">{{rowObj.opNo5Info}}</div>
              <el-select v-model="formObj.opNo5Status" class="w80 mr5">
                <el-option v-for="(s, idx) in statusOptions" :key="idx" :label="s.label" :value="s.value"></el-option>
              </el-select>
              <el-input class="w290" v-model="formObj.opNo5Info"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="其他手术5" prop="opNo6Info">
              <div class="form-item-tit">{{rowObj.opNo6Info}}</div>
              <el-select v-model="formObj.opNo6Status" class="w80 mr5">
                <el-option v-for="(s, idx) in statusOptions" :key="idx" :label="s.label" :value="s.value"></el-option>
              </el-select>
              <el-input class="w290" v-model="formObj.opNo6Info"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="其他手术6" prop="opNo7Info">
              <div class="form-item-tit">{{rowObj.opNo7Info}}</div>
              <el-select v-model="formObj.opNo7Status" class="w80 mr5">
                <el-option v-for="(s, idx) in statusOptions" :key="idx" :label="s.label" :value="s.value"></el-option>
              </el-select>
              <el-input class="w290" v-model="formObj.opNo7Info"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="离院方式" prop="leaveHosType">
              <div class="form-item-tit">{{rowObj.leaveHosType}}</div>
              <el-select v-model="formObj.leaveHosStatus" class="w80 mr5">
                <el-option v-for="(s, idx) in statusOptions" :key="idx" :label="s.label" :value="s.value"></el-option>
              </el-select>
              <el-input class="w290" v-model="formObj.leaveHosType"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </template>
    <template #footer>
      <div style="text-align: center">
        <el-button @click="onClose">取消</el-button>
        <el-button type="primary" @click="onConfirm">确认</el-button>
      </div>
    </template>
  </vxe-modal>
  `,
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    rowObj: {
      // 行数据对象
      type: Object,
      default: () => ({})
    }
  },
  emits: ['update:dialogVisible', 'on-confirm'],
  setup(props, { emit }) {
    const { reactive, toRefs, watch, ref } = Vue
    const { dialogVisible } = toRefs(props)
    const state = reactive({
      visible: dialogVisible.value
    })
    watch(
      dialogVisible,
      (newValue) => {
        state.visible = newValue
      },
      { immediate: true }
    )
    const onClose = () => {
      emit('update:dialogVisible', false)
    }

    const statusOptions = ref([
      { value: 1, label: '正确' },
      { value: 2, label: '选错' },
      { value: 3, label: '漏填' },
      { value: 4, label: '多填' }
    ])
    const formRef = ref(null)
    const formObj = ref({
      code: props.rowObj.code ? props.rowObj.code : '',
      mainDiagnosis: '', // 主诊断
      mainStatus: 1, // 主诊断正确与否
      oDiagnosis1: '', // 次诊断1
      oStatus1: 1,
      oDiagnosis2: '', // 次诊断2
      oStatus2: 1,
      oDiagnosis3: '', // 次诊断3
      oStatus3: 1,
      oDiagnosis4: '', // 次诊断4
      oStatus4: 1,
      oDiagnosis5: '', // 次诊断5
      oStatus5: 1,
      oDiagnosis6: '', // 次诊断6
      oStatus6: 1,
      oDiagnosis7: '', // 次诊断7
      oStatus7: 1,
      oDiagnosis8: '', // 次诊断8
      oStatus8: 1,
      oDiagnosis9: '', // 次诊断9
      oStatus9: 1,
      opNo1Info: '', // 主手术->手术及操作名称1
      opNo1Status: 1,
      opNo2Info: '', // 其他手术1->手术及操作名称2
      opNo2Status: 1,
      opNo3Info: '', // 其他手术2->手术及操作名称3
      opNo3Status: 1,
      opNo4Info: '', // 其他手术3->手术及操作名称4
      opNo4Status: 1,
      opNo5Info: '', // 其他手术4->手术及操作名称5
      opNo5Status: 1,
      opNo6Info: '', // 其他手术5->手术及操作名称6
      opNo6Status: 1,
      opNo7Info: '', // 其他手术6->手术及操作名称7
      opNo7Status: 1,
      leaveHosType: '', // 离院方式
      leaveHosStatus: 1,
      mainDiagnosisInInfo: '', // 主要诊断入院病情
      mainDiagnosisStatus: 1,
      oDiagnosis1InInfo: '', // 其他诊断1入院病情
      oDiagnosis1Status: 1,
      oDiagnosis2InInfo: '', // 其他诊断2入院病情
      oDiagnosis2Status: 1,
      oDiagnosis3InInfo: '', // 其他诊断3入院病情
      oDiagnosis3Status: 1,
      oDiagnosis4InInfo: '', // 其他诊断4入院病情
      oDiagnosis4Status: 1,
      oDiagnosis5InInfo: '', // 其他诊断5入院病情
      oDiagnosis5Status: 1,
      oDiagnosis6InInfo: '', // 其他诊断6入院病情
      oDiagnosis6Status: 1,
      oDiagnosis7InInfo: '', // 其他诊断7入院病情
      oDiagnosis7Status: 1,
      oDiagnosis8InInfo: '', // 其他诊断8入院病情
      oDiagnosis8Status: 1,
      oDiagnosis9InInfo: '', // 其他诊断9入院病情
      oDiagnosis9Status: 1
    })

    const onConfirm = () => {
      formObj.value.code = props.rowObj.code
      axios.post('comment/addOrEdit', formObj.value).then((res) => {
        const resData = res.data
        if (resData.code === 200) {
          emit('on-confirm', '子组件的值')
        }
      })
    }
    const resetFormStatus = () => {
      // 重置表单的状态字段值(因为状态字段没有在界面上定义el-form-item,无法通过resetFields()重置)
      const status = [
        'mainStatus',
        'oStatus1',
        'oStatus2',
        'oStatus3',
        'oStatus4',
        'oStatus5',
        'oStatus6',
        'oStatus7',
        'oStatus8',
        'oStatus9',
        'opNo1Status',
        'opNo2Status',
        'opNo3Status',
        'opNo4Status',
        'opNo5Status',
        'opNo6Status',
        'opNo7Status',
        'leaveHosStatus',
        'mainDiagnosisStatus',
        'oDiagnosis1Status',
        'oDiagnosis2Status',
        'oDiagnosis3Status',
        'oDiagnosis4Status',
        'oDiagnosis5Status',
        'oDiagnosis6Status',
        'oDiagnosis7Status',
        'oDiagnosis8Status',
        'oDiagnosis9Status'
      ]
      status.forEach((s) => {
        formObj.value[s] = 1 // 状态都重置为1
      })
    }
    const loadComment = () => {
      // 先将表单数据重置
      resetFormStatus()
      formRef.value && formRef.value.resetFields()
      const { code } = props.rowObj
      axios.get(`comment/info/${code}`).then((res) => {
        const data = res.data
        if (data.code === 200) {
          if (data.data) {
            const { createAt, updateAt, code, ...restObj } = data.data
            formObj.value = { ...restObj }
          }
        }
      })
    }
    watch(
      () => props.rowObj.code,
      () => {
        loadComment()
      }
    )

    return {
      ...toRefs(state),
      onClose,
      onConfirm,
      formRef,
      formObj,
      statusOptions
    }
  }
}
